<template>
    <div class="box">
         
      <div class="not-login" v-if="!$store.state.users.token">
        <div @click="$router.push('/login')">
          <!-- <van-icon name="graphic" size="50" color="#F8F8F8"/> -->
          <img src="@/assets/mobile.png" style="width: 60px" />
          <p>立即登陆</p>
        </div>
      </div>
      <!-- 未登录的状态 -->
      <!-- 登录的状态 -->
      <div class="login" v-else>
        <!-- 头部嘻嘻你 -->
        <div class="login-head">
          <div class="login-head-left">
            <van-image
              round
              width="1.5rem"
              height="1.5rem"
              :src="userInfo.photo"
            />
            <span>{{userInfo.name}}</span>
          </div>
          <van-button size="mini" round>编辑资料</van-button>
        </div>
        <van-row>
          <van-col :span="6">
            <p>{{userInfo.follow_count}}</p>
            <p>关注</p>
          </van-col>
          <van-col :span="6">
            <p>{{userInfo.art_count}}</p>
            <p>头条</p>
          </van-col>
          <van-col :span="6">
            <p>{{userInfo.fans_count}}</p>
            <p>粉丝数</p>
          </van-col>
          <van-col :span="6">
            <p>{{userInfo.like_count}}</p>
            <p>获赞</p>
          </van-col>
        </van-row>
      </div>
      <!-- 登录的状态 -->
      <!-- 九宫格内容 -->
      <van-grid clickable :column-num="2">
        <van-grid-item icon="star-o" text="收藏" to="/" />
        <van-grid-item icon="clock-o" text="历史" url="/vant/mobile.html" />
      </van-grid>
  
      <!-- 单元格导航 -->
      <van-cell-group v-show="$store.state.users.token">
        <van-cell title="消息通知" is-link />
        <van-cell title="实名认证" is-link/>
        <van-cell title="用户反馈" is-link/>
        <van-cell title="系统设置" is-link/>
      </van-cell-group>
      <van-cell-group>
         <van-cell title="小智同学" is-link/>
      </van-cell-group>
      <van-cell-group v-show="$store.state.users.token">
        <van-cell title="退出登陆" is-link @click="logout"/>
      </van-cell-group>
    </div>
</template>
<script>
exp

};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  background: #dfdfdf;
  font-size: 16px;
  min-height: 500px;
  padding-bottom: 10px;

  .not-login {
    width: 100%;
    height: 200px;
    background: #3196fa;
    color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login {
    width: 100%;
    height: 200px;
    background: #3196fa;
    color: #f8f8f8;
    .login-head {
      display: flex;
      width: 100%;
      padding: 10px;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;
      .login-head-left {
        display: flex;
        align-items: center;
        span {
          padding-left: 5px;
        }
      }
    }
    .van-row {
      margin-top: 15px;
      .van-col {
        text-align: center;
      }
    }
  }
  .van-cell-group {
    margin-top: 10px;
  }
}
</style>